<script setup lang="ts">
// import { useI18n } from 'vue-i18n'
// const { locale } = useI18n()

// @ts-nocheck
const t = getCurrentInstance()?.appContext.config.globalProperties?.$t;

const langOptions = ref([
    {
        name: t("lang.zh"),
        value: 'zh',
    },
    {
        name: t("lang.en"),
        value: 'en',
    },
    {
        name: t("lang.fr"),
        value: 'fr',
    },
    {
        name: t("lang.ja"),
        value: 'ja',
    },
])

const changLanguage = (newLang : string) => {
  const lang = useCookie("lang");
  lang.value = newLang;
  langOptions.value = [
    {
        name: t("lang.zh"),
        value: 'zh',
    },
    {
        name: t("lang.en"),
        value: 'en',
    },
    {
        name: t("lang.fr"),
        value: 'fr',
    },
    {
        name: t("lang.ja"),
        value: 'ja',
    },
]
};
</script>

<template>
    <UTooltip :text="$t('lang.mode')">
        <USelect class="dark:hover:text-gray-400 hover:text-blue-800 hover:bg-gray-50 dark:hover:bg-gray-800" v-model="$i18n.locale" :options="langOptions" option-attribute="name" color="gray" variant="none" @change="changLanguage($i18n.locale)" />
    </UTooltip>
    <!-- <select id="locale-select" v-model="$i18n.locale" @change="changLanguage($i18n.locale)">
        <option value="zh">{{$t("lang.zh")}}</option>
        <option value="en">{{$t("lang.en")}}</option>
        <option value="fr">{{$t("lang.fr")}}</option>
        <option value="ja">{{$t("lang.ja")}}</option>
    </select> -->
</template>

<style scoped>

</style>